<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform mat4 u_M4_01;
    void main(){
        gl_Position =u_M4_01 * a_Position;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
      gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera } from '../js/three.module.js';
    import Poly from '../js/Poly3.js';
    import { initShaders } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';

    //顶点在裁剪空间的位置 = 投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点的初始点位

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl");


    //开始背景遮挡
    // gl.enable(gl.DEPTH_TEST);

    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);


    //定义相机世界高度的一半
    const halfH = 1;
    //计算画布的宽高比
    const ratio = canvas.width / canvas.height;
    //计算相机世界宽度的一半
    const halfW = halfH * ratio;
    //定义相机世界的六个边界
    const [top, bottom, left, right, near, far] = [
        halfH, -halfH,
        -halfW, halfW,
        0, 4
    ];
    let eye = new Vector3(0, 0, 3);
    let target = new Vector3(0.5, 0, 0);
    let up = new Vector3(0, 1, 0);


    //获取正交相机
    var camera = new OrthographicCamera(
        left, right, top, bottom, near, far
    );


    let arr1 = [
        0, 0.3, -0.2,
        -0.3, -0.3, -0.2,
        0.3, -0.3, -0.2
    ];
    let a = 0.2;
    let arr2 = [
        0, 0.3, a,
        -0.3, -0.3, a,
        0.3, -0.3, a
    ];
    let pvM4 = getPvMatrix(eye, target);
    let poly1 = create([1, 0, 0, 1], arr1, pvM4);
    let poly2 = create([1, 1, 0, 1], arr2, pvM4);
    let polys = [poly1, poly2];



    rend();



    function rend() {
        lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
        polys.forEach(u => {
            u.init();
            u.draw(["TRIANGLES"]);
        })
    }

    function getPvMatrix(eye, target) {
        camera.position.copy(eye);
        camera.lookAt(target);
        //考虑到相机纯在父级属性
        //调用这个函数时会把世界坐标系写进相机的matrixWorld(世界坐标)属性里
        camera.updateWorldMatrix(true);

        return new Matrix4()
            .multiplyMatrices(
                camera.projectionMatrix,//摄像机的投影矩阵
                camera.matrixWorldInverse,//投影矩阵的逆矩阵, 因为相机移动与物体相反
            );
    }

    function create(color, arr, pvM4) {
        // poly.draw(["TRIANGLES", "POINTS"]);
        return new Poly({
            gl: gl,
            arr: arr,
            list: [
                { name: 'a_Position', size: 3, beginIndex: 0 }
            ],
            uniforms: {
                'u_Color': {
                    type: 'uniform4fv',
                    value: color
                },
                'u_M4_01': {
                    type: 'uniformMatrix4fv',
                    value: pvM4.elements
                }
            }
        });;
    }

</script>

</html>